<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>12-Tab导航切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
		.nav{
			margin:30px auto;
			width:500px;
		}
		ul li{
			float: left;
			background-color: #bdc0c4;
			border-radius: 30px;
			box-shadow: 0 4px 20px #9d9c9c;
			padding: 8px 23px !important;
			color: #fff;
			font-family:"microsoft yahei";
			cursor:pointer;
			margin-right:10px;
		}
		ul li:nth-last-child{
			margin-right:0px;
		}
		ul li.cur{
		   background-color: #f85a29;
		   box-shadow: 0 4px 20px #f9764d;
		}
		/**
			background-color: #f85a29;
		   box-shadow: 0 4px 20px #f9764d;
		 */
    </style>
    <script src="js/jquery2.1.4.min.js"></script>
</head>

<body>
	<div class="box"></div>
	<ul class="nav">
		<li>百度</li>
		<li>新浪</li>
		<li>阿里</li>
		<li>腾讯</li>
	</ul>
	<script type="text/javascript">
		//在原生JS里面的点击
		document.querySelector('.box').onclick=function(){}
		document.querySelector('.box').addEventListener('click',function(){
			
		});
	
	
		//页面加载完成
		$(function(){
			console.log($('ul>li'));
			//给每一个li的jquery元素对象绑定点击事件
			$('ul>li').click(function(){
				//获取当前点击的Jquery元素对象
				/**
				 * 设置css属性
				 * 1.jobj.css('属性名','属性值');
				 * 2.jobj.css({'属性名':'属性值','属性名':'属性值'})
				 */
				//jquery里面的排他思想
				//先让自己发生改变
				//$(this).css({'background':'#f85a29','boxShadow':'0 4px 20px #f9764d'});
				//让兄弟jquery元素对象发生改变
				//console.log($(this).siblings('li'));
				//$(this).siblings('li').css({'background':'','boxShadow':''});
				
				//链式操作
				$(this).css({'background':'#f85a29','boxShadow':'0 4px 20px #f9764d'}).siblings('li')
				.css({'background':'','boxShadow':''});
				
			});
		});
	</script>
	
	
</body>

</html>